    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水果选择器</title>
        <style>
            select{
                height: 200px;
                width: 150px;
                font-size: 24px;
                background-color: #2b81af;
            }
        </style>
        <script src="jquery.js"></script>
        <script>

        $(function () {
            $("input").eq(0).click(function () {
              $("#sell2").append($("#sell1>option"));
            });

            $("input").eq(1).click(function () {
                $("#sell1").append($("#sell2>option"));
            });
            $("input").eq(2).click(function () {
              $("#sell2").append($("#sell1 option:selected"))
          });
            $("input").eq(3).click(function () {
                $("#sell1").append($("#sell2 option:selected"))
            });

        })

        </script>
    </head>
    <body>
    <select name="" id="sell1"  size="10" multiple>
        <option value="">香蕉</option>
        <option value="">苹果</option>
        <option value="">橘子</option>
        <option value="">葡萄</option>
        <option value="">枸杞</option>
    </select>

    <input type="button" value=">>">
    <input type="button" value="<<">
    <input type="button" value=">">
    <input type="button" value="<">

    <select name="" id="sell2"  size="10" multiple>

    </select>
    </body>
    </html>